<template>
  <div class="pro_conditions">
    <one-title title="生产条件检查" @refreshData="refresh">
    </one-title>
    <div class="task_tree_container">
      <task-bom-tree ref="taskBomTree" @selectNode="selectNode"></task-bom-tree>
      <div class="task_tree_content">
        <div class="base_list">
          <mes-search-comp
            :searchList="searchList"
            ref="mesSearch"
            :searchResult="searchResult"
            @searchInfo="_info">
          </mes-search-comp>
          <div class="table_container">
            <el-table
              :data="listData.list"
              ref="mesTable"
              border
              stripe
              v-loading="isLoading1"
              :max-height="tableMaxHeight"
              @row-click="(row) => $refs.mesTable.toggleRowSelection(row)"
              @sort-change="_sort"
              @filter-change="handleFilterChange"
              @selection-change="handleSelectionChange">
              <mes-col-comp
                :key="index"
                v-for="(column, index) in tableColumn"
                :column="column"
              ></mes-col-comp>
              <el-table-column
                fixed="right"
                prop="skillStatusValue"
                label="技术状态"
                show-overflow-tooltip
                min-width="80"
                align="center">
                <template slot-scope="scope">
                  <span :class="{abnormal_status: scope.row.skillStatusValue === 'False'}">{{scope.row.skillStatusValue === 'True' ? '正常' : '异常'}}</span>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                prop="manufactureResourceStatusValue"
                label="制造资源状态"
                show-overflow-tooltip
                min-width="100"
                align="center">
                <template slot-scope="scope">
                  <span :class="{abnormal_status: scope.row.manufactureResourceStatusValue === 'False'}">{{scope.row.manufactureResourceStatusValue === 'True' ? '正常' : '异常'}}</span>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                prop="deviceStatusValue"
                label="设备状态"
                show-overflow-tooltip
                min-width="80"
                align="center">
                <template slot-scope="scope">
                  <span :class="{abnormal_status: scope.row.deviceStatusValue === 'False'}">{{scope.row.deviceStatusValue === 'True' ? '正常' : '异常'}}</span>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                prop="rawCompleteness"
                label="最底层上料齐套"
                show-overflow-tooltip
                min-width="100"
                align="center">
              </el-table-column>
            </el-table>
          </div>
          <mes-pagination
            @updateData="init"
            :currentPage="listData.pageNo"
            :total="listData.count || 0"
            :pageSize="listData.pageSize">
          </mes-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TreeFlodBtn from '@/components/TreeFlodBtn'
import tableColumn from './tableColumn'

export default {
  name: 'InspectProConditions',
  components: {
    TreeFlodBtn,
  },
  data() {
    return {
      tableColumn: tableColumn, // 工单表列
      selectData: [], // 选择的列表
      searchResult: NaN, // 搜索结果数
      isLoading1: false, // 主列表数据是否在加载
      searchData: {}, // 搜索列表数据
      sortData: {}, // 排序字段
      workStageList: [], // 工序列表
      treeClose: false,
      taskNumber: '', // 当前任务号
      defaultTask: '', // 默认进入任务号
      workorderIds: [] // 树返回的工单ID数组
    }
  },
  computed: {
    // 获取列表数据
    listData() {
      return this.$store.state.inspectProConditions.listData
    },
    // 优先级
    priorityType() {
      let priorityType = this.$store.state.dict.priorityType.labels || []
      return this.addLabelAll(priorityType)
    },
    // 技术、资源、设备状态
    selfStatusList() {
      let list = [
        {
          id: 'ID_BT_True',
          label: '正常',
          value: 'True'
        },
        {
          id: 'ID_BT_False',
          label: '异常',
          value: 'False'
        }
      ]
      return this.addLabelAll(list)
    },
    // 查询条件
    searchList() {
      /*let searchList = this.$assignObj(this.tableColumn, {
        prop: 'skillStatus',
        assignState: 'searchConfig',
        searchConfig: {
          selectList: this.selfStatusList
        }
      })
      searchList = this.$assignObj(this.tableColumn, {
        prop: 'manufactureResourceStatus',
        assignState: 'searchConfig',
        searchConfig: {
          selectList: this.selfStatusList
        }
      })
      searchList = this.$assignObj(this.tableColumn, {
        prop: 'deviceStatus',
        assignState: 'searchConfig',
        searchConfig: {
          selectList: this.selfStatusList
        }
      })*/
      let searchList = this.tableColumn || []
      return searchList
    }
  },
  mounted() {
    this.$refs.taskBomTree.init()
    this.getTaskTree()
  },
  methods: {
    // 获取任务号
    getTaskTree() {
      this.isLoading = true
      let req = {
        method: 'post',
        url: 'a/workorder/workorder/tasklist',
        noCommit: true
      }
      return this.$store.dispatch('saveData', req)
        .then(res => {
          this.defaultTask = res.data.tasklist[0].children[0].label
        })
        .finally(() => {
          this.init()
        })
    },
    // 列筛选回调
    handleFilterChange(filters) {
      this.sortData = {}
      this.$refs.mesTable.clearSort()
      let filterParams = this.$filterParams(this.searchList, filters)
      Object.assign(this.searchData, filterParams.search)
      Object.assign(this.sortData, filterParams.order)
      this.init()
    },
    // 刷新方法
    refresh() {
      this.taskNumber = ''
      this.workorderIds = []
      this.$refs.taskBomTree.init()
      this.$refs.mesSearch.clean()
      this.$refs.mesTable.clearSort()
      this.$refs.mesTable.clearFilter()
      this.sortData = {}
      this.searchData = {}
      this.getTaskTree()
    },
    // 选择树形节点
    selectNode(taskNumber, workorderIds) {
      this.searchData = {}
      this.taskNumber = taskNumber
      this.workorderIds = workorderIds
      this.$refs.mesSearch.clean()
      this.init()
    },
    // 主列表获取
    init(page) {
      this.isLoading1 = true
      let postData = {
        method: 'post',
        url: 'a/workorder/workorder/list',
        data: {
          pageNo: page ? page.pageNo : 1,
          pageSize: page ? page.pageSize : this.listData.pageSize || 15,
          query: {
            columns: this.tableColumn.reduce((pre, cur) => [...pre, cur.prop], []),
            ...this.searchData,
            viewSource: 4
          }
        },
        module: 'inspectProConditions',
        state: 'listData'
      }
      if (Object.keys(this.sortData).length > 0) {
        postData.data.sort = this.sortData
      }
      if (this.taskNumber) {
        postData.data.query.taskNumber = this.taskNumber
      } else {
        postData.data.query.taskNumber = this.defaultTask || undefined
      }
      if (this.workorderIds.length) {
        postData.data.query.id = this.workorderIds.toString()
      }
      this.$store.dispatch('saveData', postData).then((res) => {
        if (Object.keys(this.searchData).length > 0) {
          this.searchResult = res.count
        } else {
          this.searchResult = NaN
        }
      }).finally(() => {
        this.isLoading1 = false
      })
    },
    // 查询
    _info(data) {
      this.$refs.mesTable.clearSort()
      this.$refs.mesTable.clearFilter()
      this.sortData = {}
      this.searchData = data
      this.defaultTask = ''
      this.init()
    },
    // 排序
    _sort(obj) {
      this.sortData = this.$getSortOrder(obj)
      this.init()
    },
    // 多选表格数据
    handleSelectionChange(val) {
      this.selectData = val
    },
  }
}
</script>

<style lang="less">
  .pro_conditions {
    height: 100%;
    .el-tabs--border-card > .el-tabs__header {
      margin-bottom: 20px !important;
    }
    td .cell {
      .abnormal_status {
        color: #f8000f;
      }
    }
    .check_btn {
      font-size: 14px;
      color: #0066cc;
      cursor: pointer;
      .iconfont {
        font-size: 13px;
      }
    }
    .upload_btn {
      position: relative;
      overflow: hidden;
      margin-right: 10px;
      .file_btn {
        position: absolute;
        top: -20px;
        left: -20px;
        right: -20px;
        bottom: -20px;
        opacity: 0;
        cursor: pointer;
      }
    }
    .detail_list {
      position: relative;
      padding: 0 20px;
      margin-top: 30px;
      .btn_list {
        position: absolute;
        top: 0;
        right: 20px;
        z-index: 10;
      }
      .table_panel {
        padding: 0 !important;
        .el-tabs__header {
          margin-bottom: 0;
        }
        .el-table--border {
          margin: 0 !important;
          .el-table-column--selection .cell {
            padding: 0;
          }
        }
      }
    }
  }
</style>
